<template>
  <div class="gl_contentBox gl_heightFull noPadding">
    <div class="top_title">{{ title }}</div>
    <div class="gl_px_15 gl_py_15">
      <el-table v-loading="loading" class="gl_table_noBorder" :data="tableData" size="mini">
        <el-table-column label="序号" type="index" />
        <el-table-column label="订单号" prop="orderNo" :min-width="180" />
        <el-table-column label="学员" prop="studentName" :min-width="100" />
        <el-table-column label="经办日期" :min-width="135" align="center">
          <template slot-scope="{row}">
            <span v-if="row.handlingDate">
              {{ row.handlingDate | FormatDate('yyyy-MM-dd') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="经办人" prop="handlingAccount" :min-width="80" />
        <el-table-column label="销售卡种" prop="membershipCarName" :min-width="120" />
        <el-table-column label="课时" prop="classPeriod" :min-width="100">
          <template slot-scope="{row}">
            <span v-if="row.chargeTypeCode === 'Date'">无限</span>
            <span v-else>{{ row.classPeriod }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效期" prop="effectivePeriod">
          <template slot-scope="{row}">
            {{ row.effectivePeriod }}
            <span v-for="item in dict.effectivePeriodType" :key="item.code">{{ row.effectivePeriodTypeCode === item.code ? item.value : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="销售金额" prop="price" :min-width="100">
          <template slot-scope="{ row }">
            {{ row.price ? formatMoney(row.price) : '' }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="gl_mt_15" style="text-align: right;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="qo.MaxResultCount"
          :current-page="qo.Page"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import {
  Api_GET_ClubSalesCardStatisticsEmployeeSalesDetailsQO // 获取销售员的销售明细
} from '@/lib/form/hall/swaggerForm';
import {
  api_GET_ClubSalesCardStatisticsEmployeeSalesDetails // 获取销售员的销售明细
} from '@/extend/api/hallswaggerApi/app';
export default {
  data () {
    return {
      title: '个人业绩详情',
      qo: new Api_GET_ClubSalesCardStatisticsEmployeeSalesDetailsQO(),
      tableData: [],
      loading: false,
      total: 0,
      id: ''
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.id = this.$route.query.id || '';
    this.getDict();
    this.getPageList();
  },
  methods: {
    // 若没有字典信息，外部可直接调用方法获取字典数据
    ...mapActions({ getDict: 'dict/getDict' }),
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.qo.EmployeeId = this.id;
      this.qo.Sorting = 'creationTime DESC';
      this.loading = true;
      api_GET_ClubSalesCardStatisticsEmployeeSalesDetails(this.qo).then(res => {
        this.loading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>
.noPadding {
  padding: 0px;
}
.top_title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #E8E8E8;
  font-size: 16px;
  font-weight: bold;
  padding-left: 25px;
}
</style>
